<template>
	<view :data-theme="themeStyle"
		:style="{ backgroundColor: bgColor, backgroundImage: bgImg, minHeight: 'calc(100vh - 55px)' }" class="page_img">
		<template v-if="!isNetWorkError">
			<download-tip @closeDownload="closeDownload" id="download"></download-tip>
			<!-- 搜索 -->
			<view class="search-sticky-placeholder noStore-bg">
				<diy-search v-if="diyData.value&&diyData.value[0].controller=='Search'" :value="diyData.value[0]" :style="{top:searchTop}"  class="search-sticky" inputClass="home-input">
					<template #searchLeft>
						<text class="iconfont1 icon-fangdajing search-icon"></text>
					</template>
					<template #searchRight>
						<text class="search-btn flex justify-center align-center">搜索</text>
					</template>
				</diy-search>
			</view>
			<view class="status_bar" ></view>
			<view class="status_bar-placeholder"></view>
			<diy-index-page ref="indexPage" :value="topIndexValue" :minHeight="minHeight" :scrollHeight="scrollHeight"
				:scrollTopHeight="scrollTopHeight" :bgUrl="bgUrl" v-if="topIndexValue">
				<diy-group :diyData="diyData" :storeId="storeId" v-if="diyData.value" :height="scrollTopHeight">
				</diy-group>
				<view class="padding-bottom">
					<ns-copy-right></ns-copy-right>
				</view>
			</diy-index-page>
			
			<view class="bg-index" :style="backgroundUrl" v-else>
				<diy-group :diyData="diyData" v-if="diyData.value" :storeId="storeId"></diy-group>
				<view class="new-magicbox-wrapper" v-if="$store.state.isNew&&$store.state.new_box_info">
					<scroll-view class="flex new-magicbox-scroll" scroll-x="true" :show-scrollbar="false" enable-flex>
						<view class="new-box-item flex-column align-center" v-for="(item,index) in $store.state.new_box_info.products">
							<image class="img" :src="item.sku_img" mode=""></image>
							<text class="new-box-name ellipsis">{{item.sku_name}}</text>
							<view class="flex align-end mt-17">
								<text class="unit">￥</text>
								<text class="price">{{item.sku_price}}</text>
							</view>
						</view>
					</scroll-view>
					<navigator :url="'/pages/magic-box/detail/detail?magicBoxId='+$store.state.new_box_info.id" class="new-magicbox-btn">{{parseFloat($store.state.new_box_info.price)}}元开盒 立即前往</navigator>
				</view>
				<hot-lucky-bag v-if="boxLists.length>0" :boxLists="boxLists" @toItemDetail="goDetail" :autoplay="autoplay"></hot-lucky-bag>
				<view class="product-new-title">更多推荐</view>
				<view class="product-list-new flex justify-between" v-if="magicInfo.list.length">
					<view class="product-item-new flex flex-column magic-wrapper"
						v-for="(item, index) in magicInfo.list" :key="index" @click="toItemDetail(item)">
						<image class="product-img" :src="item.goods_image.split(',')[0]+'?x-oss-process=image/resize,h_304,w_304,m_fixed'" mode="" :lazy-load="true"
							v-if="item.type=='1'"></image>
						<swiper class="product-img-swiper" autoplay circular v-else>
							<swiper-item v-for="(itemImg,index) in item.goods_image.split(',')">
								<image class="img" :src="itemImg+'?x-oss-process=image/resize,h_304,w_304,m_fixed'" mode=""></image>
							</swiper-item>
						</swiper>
						<text class="name ellipsis">{{ item.goods_name }}</text>
						<text class="price-range" v-if="item.type!='1'">价值:{{$util.c_price(item.price_range)}}元</text>
						<view class="price-wrapper flex align-end" v-if="item.type=='1'">
							<text class="unit">￥</text>
							<text class="price">{{ item.price}}</text>
						</view>
						<view class="price-wrapper flex align-center justify-between" v-else>
							<text class="unit-icon"></text>
							<text class="price">{{item.price}}</text>
							<!-- <text class="buy-count">{{item.sale_num}}人已经购买</text> -->
							<text class="buy-count">场观人数  {{item.sale_num}}</text>
						</view>
						<view v-if="item.type=='2'" class="product-box-bg"></view>
					</view>
				</view>
				<ns-loading :isRotate="true" v-if="magicInfo.loading"></ns-loading>
				<view class="load-finish" v-if="magicInfo.finish">亲，已经到底了哦~</view>
				<!-- #ifdef H5 -->
				<view class="open-link" @click="openLink">copyright  2021 徐州慧迈网络科技有限公司 版权所有 苏ICP备17056307号-2</view>
				<!-- #endif -->
				<view class="padding-bottom">
					<ns-copy-right></ns-copy-right>
				</view>
			</view>
			<template
				v-show="diyData.global.popWindow && diyData.global.popWindow.count != -1 && diyData.global.popWindow.imageUrl">
				<view @touchmove.prevent.stop>
					<uni-popup ref="uniPopupWindow" type="center" class="wap-floating" :maskClick="false">
						<view class="image-wrap">
							<image :src="$util.img(diyData.global.popWindow.imageUrl)"
								:style="{ height: (480 * diyData.global.popWindow.imgHeight) / diyData.global.popWindow.imgWidth + 'rpx' }"
								@click="redirectTo(diyData.global.popWindow.link)"></image>
						</view>
						<text class="iconfont iconroundclose" @click="closePopupWindow"></text>
					</uni-popup>
				</view>
			</template>
		</template>
		<template v-else>
			<network-error @refresh="refreshExec"></network-error>
		</template>


	
		<!-- 收藏
		<uni-popup ref="collectPopupWindow" type="top" class="wap-floating wap-floating-collect">
			<view v-if="showTip" class="collectPopupWindow" :style="{ marginTop: collectTop + statusBarHeight + 'px' }">
				<image :src="$util.img('/upload/uniapp/collect2.png')" mode="aspectFit"></image>
				<text @click="closeCollectPopupWindow">我知道了</text>
			</view>
		</uni-popup>
		
		<!-- <loading-cover ref="loadingCover"></loading-cover> -->
		<full-loading :loadshow="loadshow"></full-loading>
		<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import diyBottomNav from '@/components/diy-bottom-nav/diy-bottom-nav.vue';
	import WxMap from 'common/js/map-wx-jssdk.js';
	import diyIndexPage from '@/components/diy-index-page/diy-index-page.vue';
	import diyGroup from '@/components/diy-group/diy-group.vue';
	import nsNavbar from '@/components/ns-navbar/ns-navbar.vue';
	import {
		Weixin
	} from 'common/js/wx-jssdk.js';
	import globalConfig from '@/common/js/golbalConfig.js';
	import nsCopyRight from '@/components/ns-copyright/ns-copyright.vue';
	import magicBag from "@/components/magic-box/magic-bag/index.vue"
	import toTop from "@/components/toTop/toTop.vue"
	import scroll from "@/common/js/scroll-view.js"
	import HotLuckyBag from "./components/HotLuckyBag.vue";
	
	let systemInfo = uni.getSystemInfoSync();
	export default {
		components: {
			uniPopup,
			diyBottomNav,
			nsNavbar,
			diyIndexPage,
			diyGroup,
			nsCopyRight,
			magicBag,
			toTop,
			HotLuckyBag
		},
		mixins: [globalConfig, scroll],
		data() {
			return {
				loadshow:false,
				searchTop:0,
				showDownload: false,
				loading: false,
				magicInfo: {
					page: 0,
					list: [],
					finish: false
				},
				diyData: {
					global: {
						title: '',
						popWindow: {
							imageUrl: '',
							count: -1,
							link: {},
							imgWidth: '',
							imgHeight: ''
						}
					}
				},
				navTitle: '',
				siteInfo: null,
				memberId: 0,
				id: 0,
				store: {}, //首页展示的门店详情
				storeId: 0, //首页展示的门店id

				latitude: null, // 纬度
				longitude: null, // 经度
				isIphoneX: false,

				pageHeight: '0',
				headerHeight: '0',
				bottomHeight: '0',
				topIndexValue: null,
				statusBarHeight: systemInfo.statusBarHeight,
				collectTop: 44,
				showTip: false,
				mpCollect: false,
				showSkeleton: false, //骨架屏显示隐藏
				shareTitle: '',
				shareImageurl: '',
				boxLists:[],
				autoplay:true
			};
		},
		//下拉刷新
		onPullDownRefresh() {
			this.getDiyInfo();
			this.reset()
			this.getMagicList()
			this.getHotMagic();
			this.$store.dispatch("init")
		},
		watch: {
			storeId() {
				this.$forceUpdate();
			}
		},
		onLoad(data) {
			//收集渠道号
			// #ifdef H5
				if(data.channel){
					 uni.setStorageSync('channel', data.channel);
				}
			// #endif
			this.isIphoneX = this.$util.uniappIsIPhoneX();
			// #ifdef MP-WEIXIN
			this.onShare()
			// #endif
			if (data.source_member) uni.setStorageSync('source_member', data.source_member);
			// 小程序扫码进入
			if (data.scene) {
				var sceneParams = decodeURIComponent(data.scene);
				sceneParams = sceneParams.split('&');
				if (sceneParams.length) {
					sceneParams.forEach(item => {
						if (item.indexOf('source_member') != -1) uni.setStorageSync('source_member', item.split(
							'-')[1]);
					});
				}
			}
			if (uni.getStorageSync('DIYVIEW_INDEX')) {
				this.diyData = JSON.parse(uni.getStorageSync('DIYVIEW_INDEX'));
			}
			this.refresh();
		},
		onShow(){
			this.autoplay = true;
		},
		onHide() {
			this.loadshow=false;
			this.autoplay = false;
		},
		onPageScroll(e) {
			if (this.$refs.topNav) {
				if (e.scrollTop >= 20) {
					this.$refs.topNav.navTopBg();
				} else {
					this.$refs.topNav.unSetnavTopBg();
				}
			}
		},
		onReachBottom() {
			console.log("onReachBottom")
			this.getMagicList()
			this.getHotMagic();
		},
		computed: {
			top() {
				let top = 0;
				// #ifndef h5
				top = this.isIphoneX ? 180 : 140;
				// #endif
				// #ifdef H5
				top = 90;
				// #endif
				return top;
			},
			bgColor() {
				let str = '';
				if (this.diyData && this.diyData.global) {
					str = this.diyData.global.bgColor;
				}
				return str;
			},
			bgImg() {
				let str = '';
				if (this.diyData && this.diyData.global) {
					str = this.diyData.global.topNavbg ? 'url(' + this.$util.img(this.diyData.global.bgUrl) + ')' : this
						.diyData.global.bgColor;
				}
				return str;
			},
			bgUrl() {
				let str = '';
				if (this.diyData && this.diyData.global) {
					str = this.diyData.global.topNavbg ? 'transparent' : this.diyData.global.bgUrl;
				}
				return str;
			},
			bgNav() {
				if (this.diyData.global.topNavColor) {
					return {
						background: this.diyData.global.topNavColor
					};
				} else {
					return {
						background: '#ffffff'
					};
				}
			},
			backgroundUrl() {
				var str = this.bgUrl ? 'background:' + 'url(' + this.$util.img(this.bgUrl) + ') no-repeat 0 0/100%' : '';
				return str;
			},
			scrollHeight() {
				if (this.pageHeight != undefined && this.headerHeight != undefined && this.bottomHeight != undefined) {
					return 'calc(' + this.pageHeight + 'px - ' + this.headerHeight + ' - ' + this.bottomHeight + ')';
				} else {
					return '100vh';
				}
			},
			scrollTopHeight() {
				if (this.pageHeight != undefined && this.headerHeight != undefined && this.bottomHeight != undefined) {
					return 'calc(' + this.pageHeight + 'px - ' + this.headerHeight + ' - ' + this.bottomHeight +
						' - 80rpx)';
				} else {
					return '100vh';
				}
			},
			textNavColor() {
				if (this.diyData.global.textNavColor) {
					return this.diyData.global.textNavColor;
				} else {
					return '#ffffff';
				}
			},
			openBottomNav() {
				let str = false;
				if (this.diyData && this.diyData.global) {
					str = this.diyData.global.openBottomNav;
				}
				return str;
			},
			minHeight() {
				if (this.pageHeight != undefined && this.headerHeight != undefined && this.bottomHeight != undefined) {
					return 'calc(100vh - ' + this.headerHeight + ' - ' + this.bottomHeight + ' - 80rpx)';
				} else {
					return '100vh';
				}
			},
			globalS() {
				return this.diyData.global;
			}
		},
		methods: {
			
			openLink(){
				location.href="https://beian.miit.gov.cn/"
			},
			closeDownload(){
				const {statusBarHeight} = uni.getSystemInfoSync();
				this.searchTop=statusBarHeight+"px"
			},
			calcSearchTop(){
				const {statusBarHeight} = uni.getSystemInfoSync();
				const query = uni.createSelectorQuery().in(this);
				this.searchTop=statusBarHeight+"px"
				// #ifdef H5
				query.select('#download').boundingClientRect(data => {
					if(data){
						this.searchTop=data.height+statusBarHeight+"px"
					}
				}).exec();
				// #endif
			
			},
			reset() {
				this.magicInfo = {
					page: 0,
					finish: false,
					loading: false,
					list: []
				}
			},
			goDetail(item){
				this.loadshow = true;
				setTimeout(()=>{
					this.loadshow = false;
				},2000)
				uni.navigateTo({
					url: `/pages/magic-box/detail/detail?magicBoxId=${item.goods_id}`,
				})
			},
			toItemDetail(item) {
				this.loadshow = true;
				setTimeout(()=>{
					this.loadshow = false;
				},2000)
				//普通商品
				if (item.type == "1") {
					uni.navigateTo({
						url: `/pages/goods/detail/detail?sku_id=${item.goods_id}`,
					})
				}
				//福袋
				else {
					uni.navigateTo({
						url: `/pages/magic-box/detail/detail?magicBoxId=${item.goods_id}`,
					})
				}
			},
			goodsImg(imgStr) {

				let imgs = imgStr.split(',');
				return imgs[0] ? this.$util.img(imgs[0], {
					size: 'mid'
				}) : this.$util.getDefaultImage().default_goods_img;
			},
			async getMagicList() {
				if (this.magicInfo.finish || this.magicInfo.loading) {
					return
				}
				this.magicInfo.loading = true
				try {
					let params = {
						page: this.magicInfo.page + 1,
					}
					const result = await this.$api.sendRequest({
						url: "/api/goods/home",
						data: params,
						async: false
					})
					if (result.data) {
						this.magicInfo.page++
						this.magicInfo.list = [...this.magicInfo.list, ...result.data]
					}
					//没有更多
					if (result.data.length == 0) {
						this.magicInfo.finish = true
					}
				} catch (e) {
					//TODO handle the exception

				}
				this.magicInfo.loading = false

			},
			onShare() {
				this.$api.sendRequest({
					url: '/weapp/api/weapp/share',
					success: res => {
						let that = this
						if (res.code == 0) {
							var value = res.data
							for (let key in value) {
								if (key = 'index') {
									that.shareTitle = value[key].title
									that.shareImageurl = that.$util.img(value[key].path)
								}
							}
						}
					}
				})
			},
			// 转换字符数值为真正的数值
			navbarHeight() {
				// #ifdef APP-PLUS || H5
				return this.collectTop ? this.collectTop : 44;
				// #endif
				// #ifdef MP
				// 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
				// 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
				// return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				return this.collectTop ? this.collectTop : height;
				// #endif
			},
			callback() {
				if (this.$refs.indexPage) {
					this.$refs.indexPage.initPageIndex();
				}
			},
			refresh() {
				this.store = uni.getStorageSync('store') ? uni.getStorageSync('store') : {};
				if (this.store) this.storeId = this.store.store_id;

				this.$langConfig.refresh();

				if (uni.getStorageSync('token')) {
					this.getMemberId();
				}

				this.getDiyInfo();
				this.reset()
				this.getMagicList();
				this.getHotMagic();
			},
			async getHotMagic(){
				const res = await this.$api.sendRequest({
					url: "/api/goods/hot",
					async: false
				})
				if(res.data.code==0){
					this.boxLists = res.data.data.list
				}else{
					uni.showToast({
						title:res.message,
						icon:'none'
					})
				}
			},
			//计算高度
			getHeight() {
				var self = this;
				//获取页面可用区域的高度
				uni.getSystemInfo({
					success: res => {
						this.pageHeight = res.screenHeight;
					}
				});
				// #ifdef MP || APP-PLUS
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query
						.select('.page-header')
						.boundingClientRect(data => {
							this.headerHeight = data.height + 'px';
						})
						.exec();
				});
				// #endif
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query
						.select('.page-bottom')
						.boundingClientRect(data => {
							this.bottomHeight = 55 + 'px';
						})
						.exec();
				});
			},
			async getDiyInfo() {
				var name = 'DIYVIEW_INDEX';
				try {
					const res = await this.$api.sendRequest({
						async: false,
						data: {
							name: name
						},
						url: "/api/diyview/info"
					})
					if (res.code != 0 || !res.data) {
						// if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						this.diyData = {};
						return;
					}
					let diyDatavalue = res.data;
					console.log(JSON.parse(diyDatavalue.value))
					//处理后台组件input输入单引号问题 -- 英文状态下
					// diyDatavalue.value = diyDatavalue.value.replace(/\@/g, "'");
					if (diyDatavalue.value) {
						uni.setStorageSync('DIYVIEW_INDEX', diyDatavalue.value);
						this.diyData = JSON.parse(diyDatavalue.value);
						this.$langConfig.title(this.diyData.global.title);
						this.navTitle = this.diyData.global.title;
						this.mpCollect = this.diyData.global.mpCollect;
						if (this.diyData.global.popWindow && this.diyData.global.popWindow.imageUrl) {
							// 弹框形式，首次弹出 1，每次弹出 0
							setTimeout(() => {
								if (this.diyData.global.popWindow.count == 1) {
									var index_popwindow_count = uni.getStorageSync('index_popwindow_count');
									if ((this.$refs.uniPopupWindow && index_popwindow_count == '') || (this
											.$refs.uniPopupWindow && index_popwindow_count == 1)) {
										this.$refs.uniPopupWindow.open();
										uni.setStorageSync('index_popwindow_count', 1);
									}
								} else if (this.diyData.global.popWindow.count == 0) {
									this.$refs.uniPopupWindow.open();
									uni.setStorageSync('index_popwindow_count', 0);
								}
							}, 500);
						}

						for (var i = 0; i < this.diyData.value.length; i++) {
							if (this.diyData.value[i].controller == 'TopCategory') {
								this.topIndexValue = this.diyData.value[i];
							}
						}

						// #ifdef MP
						//小程序收藏
						if (!uni.getStorageSync('isCollect') && this.diyData.global.mpCollect) {
							this.$refs.collectPopupWindow.open();
							this.showTip = true;
						}
						// #endif
					}
					uni.stopPullDownRefresh();
				} catch (e) {

				}

			},
			closePopupWindow() {
				this.$refs.uniPopupWindow.close();
				uni.setStorageSync('index_popwindow_count', -1);
			},
			closeCollectPopupWindow() {
				this.$refs.collectPopupWindow.close();
				uni.setStorageSync('isCollect', true);
			},
			redirectTo(link) {
				this.$util.diyRedirectTo(link);
			},
			getMemberId() {
				this.$api.sendRequest({
					url: '/api/member/id',
					success: res => {
						if (res.code >= 0) {
							this.memberId = res.data;
						}
					}
				});
			},
			// #ifdef MP-WEIXIN
			// 分享到微信朋友圈
			onShareTimeline() {
				this.$api.sendRequest({
					url: '/weapp/api/weapp/share',
					success: res => {
						if (res.code >= 0) {
							// console.log(res)
						}
					}
				});
				let query = '';
				if (this.memberId) query = 'source_member=' + this.memberId;
				return {
					title: '',
					query: query,
					imageUrl: ''
				};
			}
			// #endif
		},
		onShareAppMessage() {
			return {
				title: this.shareTitle,
				path: '/pages/index/index/index',
				imageUrl: this.shareImageurl,
				success: res => {},
				fail: res => {}
			};
		},
		onReady() {
			this.calcSearchTop()
			// 微信公众号分享
			// #ifdef H5
			if (this.$util.isWeiXin()) {
				this.$api.sendRequest({
					url: '/wechat/api/wechat/share',
					data: {
						url: window.location.href
					},
					success: res => {
						if (res.code == 0) {
							var wxJS = new Weixin();
							wxJS.init(res.data.jssdk_config);

							let shareConfig = res.data.share_config,
								url = this.$config.h5Domain + '/pages/index/index/index';
							if (this.memberId) url += '?source_member=' + this.memberId;

							wxJS.setShareData({
								title: shareConfig.shop_param_1 + shareConfig.site_name,
								desc: shareConfig.shop_param_2 + '\r\n' + shareConfig.shop_param_3 +
									'\r\n' + '收藏热度：★★★★★',
								link: url,
								imgUrl: this.$util.img(shareConfig.headimg)
							});
						}
					}
				});
			}
			// #endif
		}
	};
</script>

<style lang="scss">
	.open-link{
		margin-top: 20rpx;
		font-size: 24rpx;
		text-align: center;
	}
	.status_bar-placeholder{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: var(--status-bar-height);
		background-color: #fff;
		z-index: 100;
	}
	.magic-bag-list {
		padding: 19rpx 0;

		.magic-item {
			margin-bottom: 15rpx;

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
	.new-magicbox-wrapper{
		margin-top: 20rpx;
		padding: 87rpx 21rpx 24rpx;
		height: 528rpx;
		box-sizing: border-box;
		background: url("~@/static/image/new-magic-bg.png");
		background-size: 100% 100%;
		.new-magicbox-scroll{
			white-space: nowrap;
			.new-box-item{
				margin-right: 15rpx;
				padding: 12rpx 11rpx 23rpx;
				width: 213rpx;
				height: 311rpx;
				display: inline-flex;
				background-color: #fff;
				border-radius: 21rpx;
				box-sizing: border-box;
				&:last-child{
					margin-right: 0;
				}
			}
			.new-box-name{
				margin-top: 24rpx;
				font-size: 26rpx;
				color: #111111;
				line-height: 28rpx;
				width: 100%;
				height: 28rpx;
			}
			.mt-17{
				margin-top: 17rpx;
			}
			.unit{
				font-size: 22rpx;
				line-height: 22rpx;
				font-weight: bold;
				color: #111111;
			}
			.price{
				font-size: 28rpx;
				line-height: 25rpx;
				font-weight: bold;
				color: #111111;
			}
			.img{
				width: 189rpx;
				height: 190rpx;
			}
		}
		.new-magicbox-btn{
			margin-top: 22rpx;
			height: 83rpx;
			background: #FFFFFF;
			border-radius: 42rpx;
			font-size: 32rpx;
			line-height: 83rpx;
			text-align: center;
			font-weight: 500;
			color: #FF6600;
		}
	}

	.collectPopupWindow {
		position: relative;
		height: 113rpx;
		width: 510rpx;
		margin-left: calc(100% - 530rpx);

		image {
			width: 100%;
			height: 100%;
		}

		text {
			color: #ff4544 !important;
			font-size: 24rpx !important;
			position: absolute;
			top: 48rpx;
			right: 25rpx;
		}
	}

	.zhezhao {
		width: 100vw;
		height: 100vh;
		background-color: transparent;
	}

	image {
		max-width: 100% !important;
		max-height: 100% !important;
	}

	.diy-wrap {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifdef MP-WEIXIN */
		height: 100vh;
		/* #endif */
	}

	.page_img {
		background-size: contain !important;
		background-repeat: no-repeat !important;
	}

	.bg-index {
		width: 100%;
		height: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.wap-floating {
		.image-wrap {
			width: 480rpx;

			image {
				width: 100%;
				border-radius: 40rpx;
			}
		}

		text {
			display: block;
			font-size: 60rpx;
			color: #ffffff;
			text-align: center;
		}
	}

	.wap-floating-collect .uni-popup__mask {
		background: transparent;
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.popup-box {
		width: 450rpx;
		background: #ffffff;
		border-radius: $border-radius;
		overflow: hidden;

		.close_title {
			width: 100%;
			text-align: center;
			height: 70rpx;
			line-height: 70rpx;
			font-size: $font-size-base;
		}

		.close_content {
			width: 100%;
			max-height: 500rpx;
			padding: $padding;
			box-sizing: border-box;
		}

		.close_content_box {
			width: 100%;
			max-height: 460rpx;
			line-height: 1.3;
		}
	}

	.noStore-text {
		color: #000000 !important;
	}

	.isStore-top {
		margin-bottom: 10rpx;
	}

	.keep-on-record {
		text-align: center;
		padding-bottom: 20rpx;

		image {
			width: 150rpx;
			height: 60rpx;
		}
	}

	/deep/::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
		display: none;
	}
</style>

<style scoped>
	.wap-floating>>>.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
		background: none !important;
	}

	/* .noStore-bg /deep/ .search-box {
	background: #ffffff;
}

.noStore-bg /deep/ .single-graph {
	background: #ffffff;
} */
	/deep/ .placeholder {
		height: 0;
	}

	/deep/ .reward-popup .uni-popup__wrapper-box {
		background: none !important;
		max-width: unset !important;
		max-height: unset !important;
	}
</style>
<style lang="scss" scoped>
	.search-sticky-placeholder /deep/ .home-input {
		border: 1px solid #0274FF;
	}
	.search-sticky-placeholder /deep/ .search-icon{
		position: absolute;
		left: 17rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 33rpx;
		color: #999;
	}
	.search-sticky-placeholder /deep/ .search-icon + .uni-input{
		padding-left: 55rpx;
		height: 100%;
	}
	.search-sticky-placeholder{
		&::after{
			content: " ";
			display: block;
			height: 120rpx;
		}
		.search-btn{
			position: absolute;
			right:0;
			top: 0;
			width: 109rpx;
			height: 100%;
			background: linear-gradient(47deg, #6185FF, #8B60FF);
			border-radius: 40rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	.search-sticky{
		position: fixed;
		left: 0;
		height: 120rpx;
		top: var(--status-bar-height);
		width: 100%;
		background-color: #f8f8f8;
		z-index: 100;
	}
	.product-new-title {
		margin-top: 30rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #000000;
	}

	.product-list-new {
		margin-top: 23rpx;
		flex-wrap: wrap;

		.product-item-new {
			position: relative;
			margin-bottom: 20rpx;
			padding: 20rpx 20rpx 35rpx;
			width: 345rpx;
			background-color: #FFFFFF;
			border-radius: 21rpx;
			box-sizing: border-box;
		}

		.product-box-bg {
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			width: 100%;
			background-image: url("~@/static/image/magic-product-bg.png");
			background-size: 100% 100%;
		}

		.product-img {
			width: 100%;
			height: 305rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
		}

		.product-img-swiper {
			width: 100%;
			height: 305rpx;
			background: #FFFFFF;
			border-radius: 10rpx;

			.img {
				height: 100%;
				width: 100%;
			}
		}

		.name {
			margin-top: 20rpx;
			width: 305rpx;
			font-size: 28rpx;
			line-height: 28rpx;
			height: 28rpx;
			font-weight: 500;
			color: #111111;
		}
		.price-range {
			margin-top: 13rpx;
			padding: 0 10rpx;
			line-height: 28rpx;
			background: #FFEBE8;
			border-radius: 3rpx;
			font-size: 21rpx;
			font-weight: 500;
			color: #FF6E00;
			align-self: baseline;
		}
		.price-wrapper {
			margin-top: 10rpx;

			.unit {
				font-size: 26rpx;
				color: #111111;
				line-height: 26rpx;
				font-weight: bold;
			}

			.price {
				margin-right: auto;
				font-size: 28rpx;
				line-height: 30rpx;
				color: #111111;
				font-weight: bold;
			}

			.unit-icon {
				width: 44rpx;
				height: 44rpx;
				background: url("~@/static/image/coin-icon.png");
				background-size: 100% 100%;
			}

			.buy-count {
				font-size: 20rpx;
				color: #666666;
			}
		}
	}
</style>
